<template>
  <a-rate
    v-model:value="newValue"
    :allow-clear="allowClear"
    :allow-half="allowHalf"
    :autofocus="autofocus"
    :disabled="newValue > 0"
    :count="count"
    :tooltips="tooltips"
    :style="{ 'font-size': size + 'px' }"
    @change="change"
  >
    <!-- 自定义字符	 -->
    <template v-if="slots.character" #character>
      <slot name="character" />
    </template>
  </a-rate>
</template>
<script setup lang="ts">
interface Props {
  allowClear?: boolean //是否允许再次点击后清除
  allowHalf?: boolean //是否允许半选
  autofocus?: boolean //自动获取焦点
  count?: number //star 总数
  disabled?: boolean //只读，无法进行交互
  tooltips?: string[]
  value?: number
  size?: number
}
const slots = useSlots()
const props = withDefaults(defineProps<Props>(), {
  allowClear: false,
  allowHalf: false,
  autofocus: false,
  count: 5,
  disabled: false,
  tooltips: () => ["terrible", "bad", "normal", "good", "wonderful"],
  value: 0,
  size: 24,
})
//默认值，用来展示的
const newValue = ref(props.value)
const emits = defineEmits<{
  (e: "on-grade-change", value: number): void
}>()

//选择时的回调
const change = (value: number): void => {
  emits("on-grade-change", value)
}
</script>

<!-- 
  1. 该评分组件只允许评论一次
  2. 默认传递value 值大于0，那么就是展示，如果不传默认走评论
 -->
